<template>
  <a-form
    id="roleFormId"
    ref="roleFormRef"
    :model="roleModel"
    :rules="roleFormRule"
    :layout="layout"
    v-bind="formItemLayout"
  >
    <fieldset>
      <a-form-item name="roleName" :label="t('org.role.roleName')">
        <a-input :placeholder="t('org.role.formPlhRoleName')" v-model:value="roleModel.roleName" />
      </a-form-item>
      <a-form-item name="roleType" :label="t('org.role.roleType')">
        <qc-dictionary-select
          :placeholder="t('org.role.formPlhRoleType')"
          codeItemId="ORG_ROLE_TYPE"
          v-model:value="roleModel.roleType"
        >
        </qc-dictionary-select>
      </a-form-item>

      <a-form-item name="level" :label="t('org.role.roleLevel')" v-if="roleModel.roleType == 'MANAGER_ROLE'">
        <a-rate v-model:value="roleModel.roleLevel" />
      </a-form-item>

      <a-form-item name="isValid" :label="t('org.role.isValid')">
        <a-radio-group v-model:value="roleModel.isValid">
          <a-radio :value="true">{{ t('org.role.effective') }}</a-radio>
          <a-radio :value="false">{{ t('org.role.invalid') }}</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item name="roleDescription" :label="t('org.role.roleDescription')">
        <a-textarea
          v-model:value="roleModel.roleDescription"
          showCount
          :maxlength="200"
          :rows="5"
          :placeholder="t('org.role.formPlhRoleDescription')"
        />
      </a-form-item>
    </fieldset>
  </a-form>
</template>
<script lang='ts'>
import { useI18n } from 'vue-i18n'
import { computed, defineComponent, ref } from 'vue'
import { roleFormRule } from '/@/views/org/role/interface'
import { useModelForm } from '/@/kit/model-kit'
import { disabledDivDomById, removeDisabledDivDomById } from '/@/kit/dom-kit'
import roleApi from '/@/api/org/role'
export default defineComponent({
  name: 'RoleForm',
  props: {
    roleId: String, //角色id
    layout: {
      type: String,
      default: 'horizontal',
    },
  },
  emits: ['submitSuccess'],
  setup(props, { emit }) {
    const { t } = useI18n()
    const roleFormRef = ref(null)
    const roleModel = ref({})
    const layout = props.layout
    const formItemLayout = computed(() => {
      return layout === 'horizontal' ? { labelCol: { span: 6 }, wrapperCol: { span: 16 } } : {}
    })

    const { save } = useModelForm(roleFormRef, roleModel, props.roleId, roleApi)

    //提交方法
    const onSubmit = () => save().then((res) => emit('submitSuccess', res.data.data))

    const disabledStatus = ref(false)

    const disabledForm = () => {
      disabledStatus.value = !disabledStatus.value
      disabledStatus.value ? disabledDivDomById('roleFormId') : removeDisabledDivDomById('roleFormId')
    }

    return {
      t,
      roleFormRef,
      roleModel,
      roleFormRule,
      layout,
      formItemLayout,
      onSubmit,
      disabledStatus,
      disabledForm,
    }
  },
})
</script>

<style lang="less" scoped>
</style>
